<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Loading</title>
  <style>
      .spinner{
      width: 60px;
      height: 60px;
      position: relative;
      margin: 100px auto;
    }
    
    .spinner > div{
      width: 100%;
      height: 100%;
      opacity: 0.6;
      border-radius: 50%;
      background-color: lightblue;
      position: absolute;
      top: 0;
      left: 0;
      animation: loading 1.4s infinite ease-in;
    }
    
    .spinner > div:nth-child(2){
      animation-delay: -0.7s;
    }
    
    @keyframes loading{
      0%, 100% {
        transform: scale(0.0);
      }
      50% {
        transform: scale(1.0);
      }
      
    }
  </style>
</head>
<body>
  <div class="spinner">
    <div></div>
    <div></div>
  </div>
</body>
</html>

